<!-- 购买卡包 -->
<template>
	<view class="buycard">
		<view class="top-h">
			<p class="nav-tit">空港卡券联盟</p>
			<u-search @search="searchVal" class="u-search" placeholder="请输入条件" v-model="keyword" :show-action="false"></u-search>
			<view class="t-tabs">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bg-color="255,255,255,1"
				active-color="#333333" bar-width="60"></u-tabs>
			</view>
		</view>
		<view class="kong-zw"></view>
		<view class="item-box">
			<view @click="getburdetails(item.id)" class="item" v-for="(item,index) in cardList" :key="item.id">
				<image :src="item.coupon_img_2" mode="aspectFit"></image>
				<p class="one">{{item.name}}</p>
				<p class="two">领取限额：{{item.companynum}}张</p>
				<view class="b-tit">
					<view class="text-box">
						<text>免费</text>
						<text>¥{{item.price}}</text>
					</view>
					<text>剩余{{item.left_num}}张</text>
				</view>
			</view>
		</view>
		<view v-if="kztShow" class="kzt">
			<image src="../../static/images/kong.png" mode="aspectFit"></image>
			<p>暂时没有卡券哦</p>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :show-confirm-button="false" height="600" content="认证成功后才能查看"></u-modal>
	</view>
</template>

<script>
	import {shareMixins} from '../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				keyword: '',
				list: [],
				current: 0,
				nameVal:'',
				pindex:1,
				psize:6,
				search:'',
				types:1,
				cardList:[],
				companynum:'',
				show:false,
				kztShow:false
			}
		},
		onShow() {
			this.list = []
			// this.getCouponTypes()
			this.cardList = []
			this.types = 1
			this.pindex = 1
			// this.getcouponList()
			let shanghuData = uni.getStorageSync('shanghuData')
			if(shanghuData.status != 1){
				this.show = true
			}else{
				this.getCouponTypes()
				this.getcouponList()
			}
		},
		onTabItemTap(e) {//切换tabbar切换时是否登录
			if(e.index === 0){
				let openid = uni.getStorageSync('openid')
				if(openid == ''){
					this.$refs.uToast.show({
						title:'请先登录！',
						type:'error'
					})
					setTimeout(() => {
						uni.redirectTo({
							url:'../login/login'
						})
					},600)
				}
			}
			let shanghuData = uni.getStorageSync('shanghuData')
			if(shanghuData.status != 1){
				this.show = true
			}
		},
		onLoad() {},
		onReachBottom(){
			this.pindex++
			this.getcouponList()
		},
		methods: {
			async getCouponTypes(){//获取卡券分类
				const res = await this.$myRequest({
					url:'/api/businessCoupon/getCouponTypes'
				}).then((res) => {
					this.list = []
					res.data.data.forEach((i) => {
						this.list.push({'name':i.label,'index':i.value})
						
					})
				})
			},
			async getcouponList(){//获取卡券信息
				var data = {
					pindex: this.pindex,
					psize: this.psize,
					search: this.keyword,
					types:this.types
				}
				const res = await this.$myRequest({
					url:'/api/businessCoupon/couponList'+ this.$u.queryParams(data)
				}).then((res) => {
					// this.cardList = res.data.data.data
					this.cardList = [...this.cardList,...res.data.data.data]
					this.cardList.forEach((i)=>{
						i.companynum = i.company_num
						if(i.company_num === 0 || null){
							this.companynum = '不限'
						}
					})
					if(this.cardList.length == 0){
						this.kztShow = true
					}
				})
			},
			searchVal(){//搜索框值
				// console.log(this.keyword);
				this.cardList = []
				this.getcouponList()
			},
			change(index) {//获取顶部tabs下标
				this.current = index;
				// console.log(index)
				switch (index){
					case 0: 
							this.types = 1
							this.cardList = []
							this.pindex = 1
							this.getcouponList()
						break;
					case 1:
							this.types = 2
							this.cardList = []
							this.getcouponList()
						break;
					case 2:
							this.types = 3
							this.cardList = []
							this.pindex = 1
							this.getcouponList()
						break;
					case 3:
							this.types = 4
							this.cardList = []
							this.pindex = 1
							this.getcouponList()
						break;
					case 4:
							this.types = 5
							this.cardList = []	
							this.pindex = 1
							this.getcouponList()
						break;
					default:
						break;
				}
			},
			getburdetails(id){
				uni.navigateTo({
					url:'../../cardVoucher/pages/buydetails/buydetails?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buycard {
		background-image: url(../../static/images/beijing.png);
		background-size: cover;
		// position: absolute;
		width: 100%;
		// height: 100%;
		min-height: 1300rpx;
		padding: 0 34rpx 0rpx 34rpx;
		.top-h{
			background-image: url(../../static/images/top-bj.png);
			background-size: cover;
			position: fixed;
			width: 100%;
			left: 50%;
			margin-left: -50%;
			height: auto;
			z-index: 99;
			padding: 0 30rpx;
			.nav-tit {
				padding-top: 50rpx;
				font-size: 32rpx;
				color: "#333333";
				font-weight: 900;
				text-align: center;
				margin-bottom: 42rpx;
			}
		}
		
		.kong-zw{
			width: 100%;
			height: 310rpx;
		}
		.item-box{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.item{
				margin-bottom: 22rpx;
				background-color: #FFFFFF;
				width: 328rpx;
				height: auto;
				border-radius: 16rpx;
				image{
					width:100%;
					height: 254rpx;
					margin-bottom: 24rpx;
				}
				.one{
					font-size: 28rpx;
					color: #222B45;
					font-weight: bold;
					margin-bottom: 6rpx;
					padding-left: 20rpx;
				}
				.two{
					font-size: 20rpx;
					color: #8F9BB3;
					padding-left: 20rpx;
				}
				.b-tit{
					margin-top: 18rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.text-box{
						text{
							font-size: 34rpx;
							color: #EC5F2F;
							font-weight: bold;
							margin-bottom: 28rpx;
							margin-right: 15rpx;
						}
						text:nth-child(2){
							font-size: 28rpx;
							color: #8B8B8B;
							margin-bottom: 28rpx;
							text-decoration:line-through;
						}
					}
					text{
						font-size: 24rpx;
						color: #8F9BB3;
					}
				}
			}
		}
		.kzt{
			text-align: center;	
			margin-top: 350rpx;
			image{
				width: 220rpx;
				height: 240rpx;
			}
		}
	}
</style>
